<template>
  <div class="c-bg-sgray">
    <div class="fixTop c-bd-b12-f5">
      <new-search-bar :placeholder="'请输入成员昵称'" @search='startSearch' @cancel='cancelSearch'></new-search-bar>
    </div>
    <div class="c-pt90">
      <div v-if="otherFriends.masterInfo" class="c-bg-white c-mh24 c-br20 c-ph30 c-mt24">
        <div class="c-fs30 c-fw600 c-fc-xblack c-pt30">圈主</div>
        <ul>
          <li @click="handleClickCircleIndex(otherFriends.masterInfo)" class="c-flex-row c-pv30">
            <div class="c-ww72 c-hh72 c-brp50 c-text-hidden c-mr12">
              <img class="c-ww100 c-h" :src="$addXossFilter(otherFriends.masterInfo.headimgurl, require('@/assets/defult_head.png'))" />
            </div>
            <div>
              <div class="c-fs26 c-fc-xblack c-flex-row c-aligni-center">{{otherFriends.masterInfo.nickname}}<span class="theme-bg c-fs20 c-fc-white c-br6 c-pv2 c-ph4 c-ml6 c-flex-shrink0">圈主</span>
              </div>
              <p class="c-fc-sgray c-fs20 c-mt8">{{otherFriends.masterInfo.createdAt}}</p>
            </div>
          </li>
        </ul>
      </div>
      <div v-if="otherFriends.answererList && otherFriends.answererList.length" class="c-bg-white c-mh24 c-br20 c-ph30 c-mt24">
        <div class="c-fs30 c-fw600 c-fc-xblack c-pt30">答主</div>
        <ul class="c-liststyle-none">
          <li v-for="(item, index) in otherFriends.answererList" :key="index" @click="handleClickCircleIndex(item)" class="c-flex-row c-mt30 c-pb30 c-p">
            <div class="c-ww72 c-hh72 c-brp50 c-text-hidden c-mr12">
              <img class="c-ww100 c-h" :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" />
            </div>
            <div>
              <div class="c-fs26 c-fc-xblack c-flex-row c-aligni-center">{{item.nickname}}
                <span class="theme-bg-10 c-fs20 c-br6 c-ml6 theme-fc c-flex-shrink0 theme-bd1 c-ww56 c-hh3 c-flex-row c-justify-center c-aligni-center">答主</span>
              </div>
              <p class="c-fc-sgray c-fs20 c-mt8">{{item.createdAt}}</p>
            </div>
            <div v-if="circleData && circleData.myRole == 2 && item.role !=2" @click.stop="openMoreActions(item,1)" class="iconfont c-fc-gray c-pa c-p-r0 c-p-t4">&#xe6db;</div>
          </li>
        </ul>
      </div>
      <div class="c-bg-white c-mh24 c-br20 c-ph30 c-mt24">
        <div class="c-fs30 c-fw600 c-fc-xblack c-pt30">圈子成员</div>
        <ul class="c-liststyle-none">
          <li v-for="(item, index) in friendsList" :key="index" @click="handleClickCircleIndex(item)" class="c-flex-row c-mt30 c-pb30 c-p">
            <div class="c-ww72 c-hh72 c-brp50 c-text-hidden c-mr12">
              <img class="c-ww100 c-h" :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" />
            </div>
            <div>
              <div class="c-fs26 c-fc-xblack c-flex-row c-aligni-center">{{item.nickname}}</div>
              <p class="c-fc-sgray c-fs20 c-mt8">{{item.createdAt}}</p>
            </div>
            <div v-if="circleData && circleData.myRole == 2 && item.role !=2" @click.stop="openMoreActions(item,2)" class="iconfont c-fc-gray c-pa c-p-r0 c-p-t4">&#xe6db;</div>
          </li>
        </ul>
        <loading-status-tem :dataStatus="dataStatus" noDataText="暂无圈友"></loading-status-tem>
      </div>
    </div>
    <!-- 拉黑或者取消拉黑 -->
    <open-modal :openModal="showMoreActions" @closeModal="closeMoreActions">
      <div class="c-br-tl20 c-br-tr20 c-text-hidden c-w100 c-bg-sgray c-pt40">
        <div class="c-w100 c-flex-row c-aligni-center c-ph24">
          <div @click="toggleBlack" class="c-flex-column c-aligni-center c-justify-center c-ww110 c-hh138 c-pv40 c-mr20  c-bg-white c-br20">
            <i class="iconfont c-fs36">&#xe782;</i>
            <div class="c-fs24 c-w100 c-mt12 c-textAlign-c">{{choosedUserInfo.status == -1 ? '取消拉黑':'拉黑'}}</div>
          </div>
        </div>
        <div class="c-flex-row c-flex-center c-w100 c-hh80 c-fs24 c-fc-xblack c-bg-white  c-mt40" @click="closeMoreActions">取消</div>
      </div>
    </open-modal>
  </div>
</template>

<script>
import newSearchBar from "@/components/templates/common/newSearchBar.vue"
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import OpenModal from "@/components/templates/common/openModal.vue";
import { utilJs } from "@/utils/common.js";
const LIMIT = 10;
let page = 1;
let circleId = '';
let searchText; //搜索输入框
export default {
  name: 'CircleFriends',
  components: {
    loadingStatusTem,
    newSearchBar,
    OpenModal
  },
  data() {
    return {
      dataStatus: 'HAS_MORE_DATA',
      friendsList: [],
      circleData: null, // 圈子信息
      shareSetting: null, // 分享信息
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      showMoreActions: false, //是否显示更多操作
      choosedUserInfo: {}, //当前操作用户对象信息
      otherFriends: {}, //讲师和答主
    }
  },
  activated() {
    setDocumentTitle("全部圈友");
    circleId = this.$route.query.circleId || '';
    this.circleData = null;
    this.shareSetting = null;
    this.getCircleData();
    this.initData();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    openMoreActions(data) {
      this.choosedUserInfo = data;
      this.showMoreActions = true;
    },
    toggleBlack() {
      let status = this.choosedUserInfo.status == 1 ? 1 : 2;
      utilJs.postMethod(`${global.apiurl}circle/handleStatus/${this.choosedUserInfo.circleMemberId}`, {
        circleId: circleId,
        type: status
      }, () => {
        this.choosedUserInfo.status = status == 1 ? -1 : 1;
        this.closeMoreActions();
        this.updateMemberData(this.choosedUserInfo);
        this.$showCjToast({
          text: status == 1 ? '拉黑成功' : "取消拉黑成功",
          type: "success",
        })
      })
    },
    closeMoreActions() {
      this.showMoreActions = false;
    },
    updateMemberData(data) {
      if (data.isAnswer) {
        //答主
        let index = this.otherFriends.answererList.findIndex(item => item.circleMemberId == data.circleMemberId);
        if (index != -1) {
          this.otherFriends.answererList[index] = data;
        }
      } else {
        //圈友
        let index = this.friendsList.findIndex(item => item.circleMemberId == data.circleMemberId);
        if (index != -1) {
          this.friendsList[index] = data;
        }


      }
    },
    handleClickCircleIndex(item) {
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleIndex",
        query: {
          circleId: circleId,
          circleMemberId: item.circleMemberId
        }
      })
    },
    startSearch(e) {
      page = 1;
      this.friendsList = [];
      this.otherFriends = {};
      searchText = e.searchValue;
      this.getLists();
    },
    cancelSearch() {
      page = 1;
      searchText = '';
      this.friendsList = [];
      this.otherFriends = {};
      this.getOtherMember();
      this.getLists();
    },
    // 跳转到圈子
    handleClickCircleFeed() {
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleFeed",
        query: {
          id: circleId
        }
      })
    },
    // 获取圈主和答主列表其他成员
    getOtherMember() {
      utilJs.getMethod(global.apiurl + `circle/getLeaderAndAnswerer/${circleId}`, res => {
        this.otherFriends = res || {};
      })
    },
    // 获取圈子信息
    getCircleData() {
      utilJs.getMethod(global.apiurl + `circle/details/${circleId}?type=2`, res => {
        this.circleData = res || null;
        this.shareSetting = res.shareSetting || null;
        this.wechatShare();
      }, failRes => {
        this.handleClickCircleFeed();
        this.wechatShare();
      });
    },
    getLists() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}circle/getCircleMembersList/${circleId}?nickname=${searchText}&page=${page}&limit=${LIMIT}`, res => {
        if (page == 1) {
          this.friendsList = res.data;
        } else {
          this.friendsList = [...this.friendsList, ...res.data];
        }
        if (res.total * 1 == this.friendsList.length) {
          this.dataStatus = res.total * 1 == 0 ? "NO_DATA" : "NO_MORE_DATA";
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          page++;
        }
      }, failRes => {
        this.dataStatus = "DATA_ERROR"
      })
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.friendsList.length > 0) {
          this.getLists();
        }
      });
    },
    initData() {
      page = 1;
      searchText = '';
      this.dataStatus = 'HAS_MORE_DATA';
      this.friendsList = [];
      this.getLists();
      this.getOtherMember();
    },
    //分享
    wechatShare: function () {
      let title = this.shareSetting ? this.shareSetting.shareTitle : (this.circleData ? this.circleData.name : window.localStorage.getItem("shareTitle"));
      let shareImg = this.shareSetting ? this.shareSetting.sharePic : (this.circleData ? this.circleData.avatar : window.localStorage.getItem("shareLogo"));
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/circle/circleFeed?refereeId=${localStorage.getItem("userId")}&id=${circleId}`;
      let shareDesc = this.circleData ? this.circleData.intro : '点击查看详情';
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc);
    },
    //手机端分享
    appShare: function () {
      let title = this.shareSetting ? this.shareSetting.shareTitle : (this.circleData ? this.circleData.name : window.localStorage.getItem("shareTitle"));
      let shareImg = this.shareSetting ? this.shareSetting.sharePic : (this.circleData ? this.circleData.avatar : window.localStorage.getItem("shareLogo"));
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/circle/circleFeed?refereeId=${localStorage.getItem("userId")}&id=${circleId}`;
      let shareDesc = this.circleData ? this.circleData.intro : '点击查看详情';
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    }
  }
}
</script>

<style lang="less" scoped>
.fixTop {
  position: fixed;
  z-index: 100;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  left: 0;
  right: 0;
  max-width: 16rem;
  margin: 0 auto;
}
</style>